<template>
	<view class="xy-banner ovh" :style="{'border-radius': data.params.borderRadius+'rpx','margin-top':data.params.tbmargin+'rpx','margin-bottom':data.params.tbmargin+'rpx','margin-left':data.params.lrmargin+'rpx','margin-right':data.params.lrmargin+'rpx'}">
		<swiper :style="{height: data.params.height+'rpx'}" :indicator-dots="data.params.indicatorDots=='true'" :circular="true" :autoplay="data.params.autoplay=='true'" :interval="data.params.interval" :indicator-color="data.params.indicatorColor" :indicator-active-color="data.params.indicatorActiveColor" duration="500">
			<swiper-item v-for="(item, keys) in data.data" :key="keys">
				<view v-if="item.link =='contact'">
					<button open-type="contact"><image :src="$xyfun.image(item.image)" :style="{'height':data.params.height+'rpx'}" /></button>
				</view>
				<view v-else-if="item.link == 'share'">
					<button open-type="share"> <image :src="$xyfun.image(item.image)" :style="{'height':data.params.height+'rpx'}" /></button>
				</view>
				<view @tap="$xyfun.to(item.link)" v-else>
					<image :src="$xyfun.image(item.image)" :style="{'height':data.params.height+'rpx'}" />
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
		name: "xyBanner",
		props: {
			data: {
				type: Object,
				default: function() {
					return {
						name: '',
						type: '',
						params: [],
						style: [],
						data: []
					}
				}
			}
		}
	}
</script>
<style lang="scss">
	.xy-banner{
		button{background: none;padding: 0;border-radius: 0;}
		image{
			width: 100%;height: 100%;
		}
	}
</style>
